<template>
  <div class="changePwd_wrap">
    <div class="account_title">修改密码</div>
    <el-form
      @submit="submitForm"
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="changePwd_form"
      label-position="top"
      status-icon
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          type="password"
          v-model="ruleForm.oldPassword"
          placeholder="请输入原密码"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          placeholder="请输入13-20位密码(包含数字、大小写字母、特殊字符)"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="ruleForm.checkPass"
          placeholder="请输入13-20位密码(包含数字、大小写字母、特殊字符)"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" native-type="submit">
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)

const ruleForm = reactive({
  oldPassword: '',
  password: '',
  checkPass: '',
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const regex =
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&.])[A-Za-z\d$@$!%*?&.]{13,20}$/
    if (!regex.test(value)) {
      callback(new Error('请输入13-20位密码(包含数字、大小写字母、特殊字符)'))
    } else {
      callback()
    }
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value !== ruleForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules>({
  oldPassword: [{ required: true, message: '请填写原始密码', trigger: 'blur' }],
  password: [
    { required: true, message: '请填写新密码', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' },
  ],
  checkPass: [
    { required: true, message: '请再次填写新密码', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur' },
  ],
})
const submitForm = async (e) => {
  e.preventDefault()
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
    } else {
    }
  })
}
</script>

<style lang="scss" scoped></style>
